在開發 JavaScript 時，我們常常會遇到 null 和 undefined。這兩者雖然類似，但在某些情況下需要特別處理，這時候就會用到 "Nullish" 操作符 (??)。

Null vs Undefined

null: 表示一個變數已經被定義，但它的值為空。
undefined: 表示一個變數未被定義，或者它尚未被賦值。
Nullish Coalescing Operator (??)
Nullish 操作符是一種處理 null 和 undefined 的新方式。如果變數的值是 null 或 undefined，則使用 ?? 後的值。這與邏輯或 (||) 操作符類似，但 || 會在遇到任何 "falsy" 值（例如 0、''、false 等）時觸發。

使用場景：React 中透過 Axios 拉 API 取得資料
假設我們在 React 中使用 Axios 拉取 API 資料，並需要處理回傳的資料可能為 null 或 undefined 的情況。

importReact, { useState, useEffect } from'react';
import axios from'axios';

const DataFetchingComponent = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    axios.get('https://api.example.com/data')
      .then(response => {
        const fetchedData = response.data ?? "Default Value";
        setData(fetchedData);
      })
      .catch(error => {
        setError(error.message);
      })
      .finally(() => {
        setLoading(false);
      });
  }, []);

  if (loading) return<p>Loading...</p>;
  if (error) return<p>Error: {error}</p>;

  return (
    <div><h1>Fetched Data</h1><p>{data}</p></div>
  );
};

export default DataFetchingComponent;

const fetchedData = response.data ?? "Default Value";
    setData(fetchedData);

Nullish Coalescing Operator (??) 只會在遇到 null 或 undefined 時觸發。

• || 運算符: 適合在需要處理所有 “falsy” 值（如 false, 0, ''）時使用。
• ?? 運算符: 適合在僅需處理 null 或 undefined 時使用，避免其他有效的 “falsy” 值（如 0, ''）被誤判。